<template>
  <div class="document">
    <div class="header">
      <h1>操作系统专栏</h1>
      <p class="header-description">这里是关于操作系统的最新文章和讨论。</p>
    </div>
    <div class="body">
      <div class="info_complex">
        <div class="left">
          <div class="personal_info">
            <img :src="userInfo.avatar" alt="用户头像" />
            <h2 class="username">领域专家：Alice</h2>
            <div class="ww">
              <span>访问：{{ userInfo.visits }}</span>
              <span>文章：{{ essays.length }}</span>
              <span>热度：全站第一名</span>
            </div>
          </div>

          <div class="essay_list">
            <div v-for="essay in essays" :key="essay.title" class="essay">
              <router-link :to="'/article/' + essay.title" class="myblog_title">{{ essay.title }}</router-link>
              <p class="summary">{{ essay.summary }}</p>
              <div class="info">
                <span class="time">{{ essay.time }}</span>
                <div style="font-size: 20px">
                  <!-- 由于SVG图标默认不携带任何属性 -->
                  <!-- 你需要直接提供它们 -->
                  <Edit style="width: 1em; height: 1em; margin-right: 8px" />
                  <Share style="width: 1em; height: 1em; margin-right: 8px" />
                  <Delete style="width: 1em; height: 1em; margin-right: 8px" />
                  <Search style="width: 1em; height: 1em; margin-right: 8px" />
                </div>
              </div>
              <hr />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {
        username: 'Alice',
        avatar: require('@/assets/index_notlogin/tx.jpg'),
        visits: 850,
      },
      essays: [
        {
          title: '十个程序员必备的网站推荐',
          summary: '程序员的工作和日常生活非常的枯燥，这里给大家推荐一些程序员经常使用的网站...',
          time: '2024-04-16 10:23:45',
          reads: 56,
          comments: 15,
        },
        {
          title: 'CSS中伪类和伪元素的区别',
          summary: '1.css中的伪类：伪类是基于当前元素所处的状态...',
          time: '2024-04-05 12:35:12',
          reads: 56,
          comments: 15,
        },
        {
          title: '浅谈Html5的优势和劣势',
          summary: '作为Html的第五次重大改革，Html5在以下方面均有改进...',
          time: '2024-03-25 17:56:10',
          reads: 56,
          comments: 15,
        },
      ],
    };
  },
};
</script>

<style scoped>
body {
  font-family: 'HarmonyOS Sans SC', sans-serif;
  background: #f5f5f5 url('@/assets/myblog/bg.jpg') no-repeat center center fixed;
  background-size: cover;
  line-height: 1.6;
  color: #333;
}

.document {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.header {
  text-align: center;
  margin-bottom: 20px;
}

.header h1 {
  font-size: 32px;
  color: #3498db;
}

.header-description {
  color: #666;
  font-size: 16px;
}

.info_complex {
  display: flex;
}

.left {
  width: 100%;
}

.personal_info {
  background-color: rgba(249, 249, 249, 0.9);
  border-radius: 10px;
  padding: 20px;
  text-align: center;
}

.personal_info img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-bottom: 10px;
}

.username {
  font-size: 18px;
  font-weight: bold;
  color: #3498db;
}

.ww span {
  display: block;
  font-size: 14px;
  color: #7f8c8d;
}

.essay_list {
  margin-top: 20px;
}

.essay {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-bottom: 20px;
  transition: box-shadow 0.3s;
}

.essay:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.myblog_title {
  font-size: 20px;
  color: #2c3e50;
  text-decoration: none;
  transition: color 0.3s;
}

.myblog_title:hover {
  color: #3498db;
}

.summary {
  font-size: 14px;
  color: #7f8c8d;
  margin: 10px 0;
}

.info {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #95a5a6;
}

.info img {
  width: 16px;
  height: 16px;
  margin-right: 5px;
}

.color {
  color: #3498db;
}

.small {
  color: #7f8c8d;
}

hr {
  border: none;
  border-top: 1px solid #ecf0f1;
  margin: 20px 0;
}
</style>